
<template>
  <div class="index_box">
    <div class="product-box my-list-box">
      <!-- <div class="shop_banner_n">
        <categroy />
      </div> -->
      <div class="my-list">
        <productList :product-list="productList" />
      </div>
      <div class="marginTop20 center">
        <template>
          <PAGER ref="wptxPager" @search="onChangePage" />
        </template>
      </div>
    </div>

  </div>
</template>
<script>
import categroy from '@/components/categroy'
import productList from '@/components/productList'
import _validate from '@/framework/commonJs/wptx_validate'
import { _recommendList } from '@/api/homePage'
import PAGER from '@/framework/commonTemplate/wptx_page'
export default {
  name: 'ProductListIndex',
  components: {
    productList,
    categroy,
    PAGER
  },

  data() {
    return {
      productList: [],
      pageData: {
        pageNo: 1,
        pageSize: 20,
        totalCount: 1,
        pageSizes: [10, 20, 50, 100]
      }
    }
  },

  computed: {

  },
  watch: {

    $route(to, form) {
      console.log('7777', this.$route.query)
      this.recommendListFn()
    }
  },
  created() {
  },
  mounted() {
    console.log('当前页面搜索', this.$route.query.id) // 获取参数请求接口渲染商品列表
    this.recommendListFn()
  },
  methods: {
    // 商品列表
    async recommendListFn() {
      const params = {
        isHot: 0,
        isNew: 0,
        isSelected: this.$route.query.id ? 0 : 1, // isSelected; 是否精选,（0:否; 1:是;
        itemName: this.$route.query.id,
        storeId: 1
      }
      const { result } = await _recommendList({ ...this.pageData, ...params })
      if (_validate.checkEmpty(result)) {
        _validate.openTip(this, '获取超时，请稍后重试', 'warning')
      } else {
        this.productList = result.result
        this.pageData.totalCount = result.totalCount

        this.$refs.wptxPager.updatePageData(this.pageData)
      }
    },
    // 分页
    onChangePage(data) {
      console.log(data)
      this.pageData = { ...this.pageData, ...data }
      this.recommendListFn()
    }
  }

}
</script>
<style  scoped lang="scss">
.product-box.my-list-box {
  width: 1200px;
  margin: 0 auto;
  //display: flex;
  .my-list {
    //margin-left: 7px;
}
}
</style>

